<!-- 添加业务负责人 -->
<template>
  <div class="add-business-leader">
    <el-dialog 
      v-el-drag-dialog="{drag: true, full: false, resize: true}"
      :visible="true"
      :close-on-click-modal="false"
      @close="closeMd"
      title="添加业务负责人" 
      width="600px"
    >
        <el-form :model="fm.ps" :ref="fm.fname" :inline="true" @keyup.enter.native="saveBusinessLeader">
            <el-form-item 
                label="姓名" 
                prop="ownerName"
                :rules="[
                    { required: true, message: '请输入业务负责人姓名', trigger: 'blur' },
                    { min: 1, max: 16, message: '业务负责人姓名长度最多为16位字符', trigger: 'blur' }
                ]"
            >
                <el-input 
                    v-model="fm.ps.ownerName" 
                    placeholder="请输入业务负责人姓名"
                ></el-input>
            </el-form-item>

            <el-form-item 
                label="手机" 
                prop="ownerPhone"
                :rules="[
                    { required: true, message: '请输入业务负责人手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '业务负责人手机号为11位纯数字', trigger: 'blur' }
                ]"
            >
                <el-input 
                    v-model="fm.ps.ownerPhone" 
                    placeholder="请输入业务负责人手机号"
                ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button 
                    type="primary" 
                    @click="saveBusinessLeader" 
                    icon="el-icon-plus"
                >保存</el-button>
            </el-form-item>
        </el-form>

        <div class="bl-list">
            <el-tag
                v-for="tag in blTags"
                :key="tag.phone"
                closable
                @close="handleClose(tag)"
            >
                <span>
                   <i class="el-icon-user"></i>
                   <el-divider direction="vertical"></el-divider>
                   {{tag.realName}} 
                   <el-divider direction="vertical"></el-divider> 
                   {{tag.phone}}
                </span>
            </el-tag>
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onSubmit" :disabled="fm.sb.load">{{fm.sb.text}}</el-button>
            <el-button @click="closeMd">取消</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';
import * as cusService from '@/api/services/cus.service';

export default {
  name: 'AddBusinessLeader',
  directives: { elDragDialog },
  props: { myData: Object },
  data() { 
    return {
      uname: this.myData.uname,
      fm: {
        fname: 'addBusinessLeaderFm',
        sb: { load: false, text: '添加' },
        ps: {
          ownerName: '',
          ownerPhone: ''
        },
      },
      blTags: [],
      
    }
  },
  created() {
    const that = this;


    this.findDutys();
  },
  methods:{
    /* 关闭弹框 */
    closeMd(){
      this.$emit('myClick', {state: false});
    },
    /**
     * 获取-单位所有客户类型
     */
    findDutys(){
      const that = this;

      let loading = that.U.qloading('数据请求中...');
      cusService.findDutys({cusUname: that.uname}).then(res => {
        that.blTags = res.data;

        that.U.qclose(loading);
      });
    },
    /**
     * 保存-业务负责人项
     */
    saveBusinessLeader(){
        const that = this;

        that.$refs[that.fm.fname].validate((valid) => {
        if (!valid) {
          return false; 
        }else{
          let is = false;
          for(let i = 0; i < that.blTags.length; i++){
            let it = that.blTags[i];
            if(it.phone == that.fm.ps.ownerPhone){
                is = true;
                that.U.qerror(`已存在手机号【${that.fm.ps.ownerPhone}】的业务负责人`);
                break;
            }
          }

          if(!is) that.blTags.push({phone: that.fm.ps.ownerPhone, realName: that.fm.ps.ownerName});
        }
      });
    },
    /**
     * 删除-标签
     */
    handleClose(tag) {
        this.blTags.splice(this.blTags.indexOf(tag), 1);
    },
    /**
     * 提交表单
     */
    onSubmit(){
        const that = this, U = that.U;

        if (that.blTags.length === 0) {
          U.qerror('至少添加一个业务负责人');
        }else{
          that.fm.sb.load = true;
          let loading = U.qloading('提交中，请稍后...');

          // 参数处理
          let personInCharge = [];
          that.blTags.forEach(it => {
            personInCharge.push({
              name: it.realName,
              phone: it.phone
            });
          });

          let ps = {
            cusUname: that.uname,
            personInCharge: personInCharge
          };
          cusService.addPersonInCharge(ps).then(res => {
            that.fm.sb.load = false;
            U.qclose(loading);

            if(!res || res.code != 1){
              U.qerror(res.msg);
            }else {
              U.qsuccess(res.msg);

              // 关闭弹框
              that.closeMd();
            }
          }).catch(() => {U.qclose(loading);});
        }
    },

  },

 }
</script>
<style lang="less" scoped>
.add-business-leader{
    .el-form{
        border-bottom: 1px solid #efefef;
    }

    .bl-list{
        padding: 20px 0px;
        height: 100px;

        .el-tag{
            margin-right: 15px;
            margin-bottom: 10px;
        }
    }
}
</style>